<template>
	<view class="tqb-tabbar">
		
		<!-- 弹出页面 End-->
		<view class="tqb-tabbar-body">
			<view class="tqb-tabbar-item" v-for="(item, index) in tabBarList" :key="index"
				@click="switchClick(item, index)">
				<view class="tabbar-item-body">
					<view class="tabbar-item-icon">
						<image :src="activeIndex == index ? item.selectedIconPath : item.iconPath"
							style="width: 56rpx; height: 56rpx;"></image>
					</view>
					<view :class="[activeIndex == index ? 'active' : '', 'tab-bar-text']">{{ item.text }}</view>
				</view>
				<!-- 中间 +号 -->
				<!-- <view v-else class="add-icon">
					<image :src="item.iconPath" style="width: 88rpx; height: 88rpx;"></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['activeIndex'],
	data() {
		return {
			tabBarList: [{
				text: '首页',
				iconPath: '/static/tqb-tabbar/home2.png',
				selectedIconPath: '/static/tqb-tabbar/home.png',
				pagePath: '/pages/index',
			}, 
			{
				text: '分类',
				iconPath: '/static/tqb-tabbar/fenlei.png',
				selectedIconPath: '/static/tqb-tabbar/fenlei2.png',
				pagePath: '/pages/classify/index',
			}, 
			{
				text: '购物车',
				iconPath: '/static/tqb-tabbar/gouwuche.png',
				selectedIconPath: '/static/tqb-tabbar/gouwuche2.png',
				pagePath: '/pages/shopping/index',
			}, {
				text: '我的',
				iconPath: '/static/tqb-tabbar/wode11.png',
				selectedIconPath: '/static/tqb-tabbar/wode22.png',
				pagePath: '/pages/mine/index',
			}],
			
		}
	},
	watch: {
		visible: function (d) {
			// todo anything
		}
	},
	methods: {
		switchClick(data, index) {
			console.log('当前页面索引：',index)
			//如果相等，则相同切换卡点了2次。
			if (index == this.activeIndex) {
				return
			}
			//console.log('当前页面索引：',this.activeIndex,'____切换页面_后__',index)
			uni.redirectTo({
				url:data.pagePath
			})
			
		},
	}
}
</script>

<style lang="scss" scoped>
.tqb-tabbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}

.tqb-tabbar-body {
	border-radius: 80rpx;
	height: 120rpx;
	display: flex;
	//background: linear-gradient(to right, #F5FFFA, #ffffff);
	// opacity:0.6;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	position: fixed;
	// bottom: 58rpx;
	bottom: 45rpx;
	width: 704rpx;
	left: 24rpx;
	z-index: 1001;
	padding-top: 20rpx;
	box-shadow: 0px 0px 22rpx 9rpx rgba(0, 0, 0, 0.2);

	.tqb-tabbar-item {
		flex: 1;
		display: flex;
		justify-content: center;
		text-align: center;

		.tabbar-item-body {}

		.tabbar-item-icon {
			display: flex;
			justify-content: center;
		}

		.tab-bar-text {
			//color: rgba(191,203,217,1);
			color: #bfcbd9;
			font-size: 22rpx;
			margin-top: 9rpx;
		}

		.active {
			color: #ffffff;
		}

		.add-icon {
			width: 88rpx;
			height: 88rpx;
			position: relative;
			top: -8rpx;
		}
	}
}

.tqb-tabbar-popup {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.49) 32%, rgba(0, 0, 0, 0.66) 100%);
	height: 660rpx;

	.mask-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.popup-body {
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		top: 142rpx;
		width: 100%;

		.popup-item {
			width: 20%;
			margin-bottom: 20rpx;
			text-align: center;

			.popup-item-icon {
				display: flex;
				justify-content: center;
			}

			.popup-item-text {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
}
</style>
